<template>
  <div class="demo-inner-divider">基本用法</div>
  <div class="example-demo">
    <e-row>
      <e-col span="12">col-12</e-col>
      <e-col span="12">col-12</e-col>
    </e-row>
    <br />
    <e-row>
      <e-col span="8">col-8</e-col>
      <e-col span="8">col-8</e-col>
      <e-col span="8">col-8</e-col>
    </e-row>
    <br />
    <e-row>
      <e-col span="6">col-6</e-col>
      <e-col span="6">col-6</e-col>
      <e-col span="6">col-6</e-col>
      <e-col span="6">col-6</e-col>
    </e-row>
  </div>

  <div class="demo-inner-divider">区块间隔</div>
  <p>
    通过给 row 添加 gutter 属性，可以给下属的 col 添加间距，推荐使用 (16+8n)px
    作为栅格间隔。
  </p>
  <div class="example-demo example-demo-block">
    <e-row :gutter="16">
      <e-col span="6">
        <div>col-6</div>
      </e-col>
      <e-col span="6">
        <div>col-6</div>
      </e-col>
      <e-col span="6">
        <div>col-6</div>
      </e-col>
      <e-col span="6">
        <div>col-6</div>
      </e-col>
    </e-row>
  </div>
  <div class="demo-inner-divider">区块顺序</div>
  <p>通过 Flex 布局的order来改变栅格的顺序。</p>
  <div class="example-demo">
    <e-row>
      <e-col span="6" order="4">1 | order-4</e-col>
      <e-col span="6" order="3">2 | order-3</e-col>
      <e-col span="6" order="2">3 | order-2</e-col>
      <e-col span="6" order="1">4 | order-1</e-col>
    </e-row>
  </div>
  <div class="demo-inner-divider">栅格排序</div>
  <p>通过设置push和pull来改变栅格的顺序。</p>
  <div class="example-demo">
    <e-row>
      <e-col span="18" push="6">col-18 | push-6</e-col>
      <e-col span="6" pull="18">col-6 | pull-18</e-col>
    </e-row>
  </div>
  <div class="demo-inner-divider">左右偏移</div>
  <p>通过设置offset属性，将列进行左右偏移，偏移栅格数为offset的值。</p>
  <div class="example-demo">
    <e-row>
      <e-col span="8">col-8</e-col>
      <e-col span="8" offset="8">col-8 | offset-8</e-col>
    </e-row>
    <br />
    <e-row>
      <e-col span="6" offset="8">col-6 | offset-8</e-col>
      <e-col span="6" offset="4">col-6 | offset-4</e-col>
    </e-row>
    <br />
    <e-row>
      <e-col span="12" offset="8">col-12 | offset-8</e-col>
    </e-row>
  </div>
  <div class="demo-inner-divider">Flex布局</div>
  <p>
    通过给row设置参数justify为不同的值，来定义子元素的排布方式。在flex模式下有效。
  </p>
  <div class="example-demo">
    <p>子元素向左排列</p>
    <e-row justify="start" class="code-row-bg">
      <e-col span="4">col-4</e-col>
      <e-col span="4">col-4</e-col>
      <e-col span="4">col-4</e-col>
      <e-col span="4">col-4</e-col>
    </e-row>
    <p>子元素向右排列</p>
    <e-row justify="end" class="code-row-bg">
      <e-col span="4">col-4</e-col>
      <e-col span="4">col-4</e-col>
      <e-col span="4">col-4</e-col>
      <e-col span="4">col-4</e-col>
    </e-row>
    <p>子元素居中排列</p>
    <e-row justify="center" class="code-row-bg">
      <e-col span="4">col-4</e-col>
      <e-col span="4">col-4</e-col>
      <e-col span="4">col-4</e-col>
      <e-col span="4">col-4</e-col>
    </e-row>
    <p>子元素等宽排列</p>
    <e-row justify="space-between" class="code-row-bg">
      <e-col span="4">col-4</e-col>
      <e-col span="4">col-4</e-col>
      <e-col span="4">col-4</e-col>
      <e-col span="4">col-4</e-col>
    </e-row>
    <p>子元素分散排列</p>
    <e-row justify="space-around" class="code-row-bg">
      <e-col span="4">col-4</e-col>
      <e-col span="4">col-4</e-col>
      <e-col span="4">col-4</e-col>
      <e-col span="4">col-4</e-col>
    </e-row>
  </div>

  <div class="demo-inner-divider">Flex对齐</div>
  <p>
    通过给row设置参数align为不同的值，来定义子元素在垂直方向上的排布方式。在flex模式下有效
  </p>
  <div class="example-demo">
    <p>顶部对齐</p>
    <e-row justify="center" align="top" class="code-row-bg">
      <e-col span="4"><p style="height: 80px">col-4</p></e-col>
      <e-col span="4"><p style="height: 30px">col-4</p></e-col>
      <e-col span="4"><p style="height: 100px">col-4</p></e-col>
      <e-col span="4"><p style="height: 60px">col-4</p></e-col>
    </e-row>
    <p>底部对齐</p>
    <e-row justify="center" align="bottom" class="code-row-bg">
      <e-col span="4"><p style="height: 80px">col-4</p></e-col>
      <e-col span="4"><p style="height: 30px">col-4</p></e-col>
      <e-col span="4"><p style="height: 100px">col-4</p></e-col>
      <e-col span="4"><p style="height: 60px">col-4</p></e-col>
    </e-row>
    <p>居中对齐</p>
    <e-row justify="center" align="middle" class="code-row-bg">
      <e-col span="4"><p style="height: 80px">col-4</p></e-col>
      <e-col span="4"><p style="height: 30px">col-4</p></e-col>
      <e-col span="4"><p style="height: 100px">col-4</p></e-col>
      <e-col span="4"><p style="height: 60px">col-4</p></e-col>
    </e-row>
  </div>

  <div class="demo-inner-divider">Flex 填充</div>
  <p>Col 提供 flex 属性以支持填充。</p>
  <div class="example-demo">
    <h4 >百分比</h4>
    <e-row>
      <e-col flex="2">2 / 5</e-col>
      <e-col flex="3">3 / 5</e-col>
    </e-row>
    <h4 >填补</h4>
    <e-row>
      <e-col flex="100px">100px</e-col>
      <e-col flex="auto">Fill Rest</e-col>
    </e-row>
    <h4 >Flex 属性</h4>
    <e-row>
      <e-col flex="1 1 200px">1 1 200px</e-col>
      <e-col flex="0 1 300px">0 1 300px</e-col>
    </e-row>
    <e-row :wrap="false" style="margin-top: 16px">
      <e-col flex="none">
        <div style="padding: 0 16px">none</div>
      </e-col>
      <e-col flex="auto">auto with no-wrap</e-col>
    </e-row>
  </div>
  <div class="demo-inner-divider">响应式布局</div>
  <p>预设六个响应尺寸：xs sm md lg xl xxl，详见 API。调整浏览器尺寸来查看效果。</p>
  <div class="example-demo">
    <e-row>
      <e-col :xs="2" :sm="4" :md="6" :lg="8">Col</e-col>
      <e-col :xs="20" :sm="16" :md="12" :lg="8">Col</e-col>
      <e-col :xs="2" :sm="4" :md="6" :lg="8">Col</e-col>
    </e-row>
  </div>

  <div class="demo-inner-divider">其它属性的响应式</div>
  <p>span pull push offset order 属性可以通过内嵌到 xs sm md lg 属性中来使用。<br/> 其中 :xs="6" 相当于 :xs="{ span: 6 }"。</p>
  <div class="example-demo">
    <e-row>
      <e-col :xs="{ span: 5, offset: 1 }" :lg="{ span: 6, offset: 2 }">Col</e-col>
      <e-col :xs="{ span: 11, offset: 1 }" :lg="{ span: 6, offset: 2 }">Col</e-col>
      <e-col :xs="{ span: 5, offset: 1 }" :lg="{ span: 6, offset: 2 }">Col</e-col>
    </e-row>
  </div>
  <col-md class="markdown-body"></col-md>
</template>

<script>
import colMd from "../../docs/col.md"
export default {
  components:{
    colMd
  }
}
</script>

<style scoped>
.example-demo .haloe-col:nth-child(odd),
.example-demo .haloe-col:nth-child(odd) div {
  background: rgba(51, 125, 255, 0.6);
  /* background: #99a9bf; */
}
.example-demo .haloe-col,
.example-demo .haloe-col div {
  color: #fff;
  padding: 10px 0;
  text-align: center;
  background: rgba(51, 125, 255, 0.9);
  /* background: #d3dce6; */
}

.example-demo-block .haloe-col,
.example-demo-block .haloe-col:nth-child(odd) {
  background: none;
}
.code-row-bg {
  background: rgba(0, 0, 0, 0.05);
}
</style>
